<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 添加 jQuery CDN -->
    <style>
        body {
            background-image: url('../images/background.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .admin-container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            width: 1200px;
            max-width: 100%;
        }

        .admin-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .layui-form-label {
            width: 80px;
            color: #333;
            font-weight: 600;
        }

        .layui-input-inline {
            width: 200px;
        }

        .layui-btn {
            background-color: #009688;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .layui-btn:hover {
            background-color: #00796b;
        }
    </style>
</head>

<body>
<div class="admin-container">
    <div class="admin-title">用户管理</div>
    <button class="layui-btn" id="addUserBtn">添加用户</button>
    <table id="userTable" lay-filter="userTable"></table>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <a href="admin_add.html" class="layui-btn layui-btn-normal">返回添加用户页面</a>
        </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer;

        // 初始化用户表格
        var userTableIns = table.render({
            elem: '#userTable',
            url: 'http://59.110.144.74/user/users', // 获取用户列表的接口
            cols: [[
                { field: 'id', title: 'ID', width: 80 },
                { field: 'username', title: '用户名', width: 150 },
                {
                    field: 'isAdmin',
                    title: '是否为管理员',
                    width: 150,
                    templet: function(d) {
                        // 根据 isAdmin 的值动态显示角色信息
                        return d.isAdmin ? '管理员' : '普通用户';
                    }
                },
                { field: 'password', title: '密码', width: 150 }, // 新增密码列
                {
                    field: 'unitId',
                    title: '所属单位',
                    width: 150,
                    templet: function(d) {
                        // 动态加载单位名称
                        var unitName = '';
                        $.ajax({
                            type: 'GET',
                            url: 'http://59.110.144.74/user/unitName/' + d.unitId, // 根据 unitId 查询单位名称
                            async: false, // 同步请求以确保返回值可用
                            success: function(res) {
                                unitName = res.data || '未知单位';
                            },
                            error: function() {
                                unitName = '加载失败';
                            }
                        });
                        return unitName;
                    }
                },
                {
                    field: 'registerTime',
                    title: '注册时间',
                    width: 180,
                    templet: function(d) {
                        // 确保注册时间正确显示，如果为空则显示 "无"
                        return d.registerTime || '无';
                    }
                },
                { title: '操作', width: 150, toolbar: '#userBar' }
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            response: {
                statusCode: 0 // 0 代表成功
            },
            error: function (res) {
                layer.msg('加载用户列表失败');
            }
        });

        // 监听工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                // 弹出编辑窗口
                layer.open({
                    type: 1, // 类型为页面层
                    title: '编辑用户',
                    area: ['500px', '300px'], // 宽高
                    content: `
                        <form class="layui-form" style="padding: 20px;" id="editUserForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" value="${data.username}" autocomplete="off" placeholder="用户名"
                                           class="layui-input" lay-verify="username">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password"  value="${data.password}" autocomplete="off" placeholder="******"
                                           class="layui-input" lay-verify="password">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-block">
                                    <select name="isAdmin" lay-verify="isAdmin">
                                        <option value="true" ${data.isAdmin ? 'selected' : ''}>管理员</option>
                                        <option value="false" ${!data.isAdmin ? 'selected' : ''}>普通用户</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属单位</label>
                                <div class="layui-input-block">
                                    <select name="unitId" id="unitId" lay-verify="unitId">
                                        <!-- 单位选项将通过 AJAX 动态加载 -->
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="id" value="${data.id}">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="editUserForm">保存</button>
                                    <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                                </div>
                            </div>
                        </form>
                    `,
                    success: function (layero, index) {
                        // 加载单位列表
                        $.ajax({
                            type: 'GET',
                            url: 'http://59.110.144.74/user/units',
                            dataType: 'json',
                            success: function (units) {
                                var select = $('#unitId');
                                units.forEach(function (unit) {
                                    select.append('<option value="' + unit.id + '">' + unit.unitName + '</option>');
                                });
                                // 设置默认选中的单位
                                $('#unitId').val(data.unitId);
                                form.render('select'); // 重新渲染表单
                            },
                            error: function (xhr, status, error) {
                                console.error(error);
                                layer.msg('加载单位列表失败');
                            }
                        });

                        // 手动实现重置功能
                        $('#resetBtn').on('click', function () {
                            $('#editUserForm')[0].reset(); // 清空表单
                        });

                        // 监听保存按钮的提交事件
                        form.on('submit(editUserForm)', function (formData) {
                            var updatedData = formData.field;

                            // 将 isAdmin 转换为布尔值
                            updatedData.isAdmin = updatedData.isAdmin === 'true';

                            // 如果密码字段为占位符或未修改，则移除密码字段
                            if (updatedData.password === '******' || !updatedData.password.trim()) {
                                delete updatedData.password; // 不更新密码
                            }

                            // 打印发送的数据
                            console.log('Sending Data:', JSON.stringify(updatedData));

                            // 发送保存请求
                            $.ajax({
                                type: 'PUT',
                                url: 'http://59.110.144.74/user/update', // 更新用户的接口
                                data: JSON.stringify(updatedData),
                                contentType: 'application/json',
                                success: function (res) {
                                    console.log('更新成功:', res);
                                    layer.msg('更新成功');
                                    layer.close(index); // 关闭弹出窗口
                                    userTableIns.reload(); // 刷新表格
                                },
                                error: function (xhr, status, error) {
                                    console.error('Error Status:', xhr.status);
                                    console.error('Error Response:', xhr.responseText);
                                    layer.msg('更新失败: ' + xhr.responseText);
                                }
                            });

                            return false; // 阻止表单默认提交行为
                        });
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该用户吗？', function (index) {
                    // 发送删除请求
                    $.ajax({
                        type: 'DELETE',
                        url: 'http://59.110.144.74/user/delete/' + data.id, // 删除用户的接口
                        success: function (res) {
                            console.log('删除成功:', res);
                            layer.msg('删除成功');
                            userTableIns.reload(); // 刷新表格
                        },
                        error: function (xhr, status, error) {
                            console.error('Error Status:', xhr.status);
                            console.error('Error Response:', xhr.responseText);
                            layer.msg('删除失败: ' + xhr.responseText);
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 添加用户按钮点击事件
        $('#addUserBtn').on('click', function () {
            // 弹出添加用户窗口
            layer.open({
                type: 1, // 类型为页面层
                title: '添加用户',
                area: ['500px', '300px'], // 宽高
                content: `
                    <form class="layui-form" style="padding: 20px;" id="addUserForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" autocomplete="off" placeholder="用户名"
                                       class="layui-input" lay-verify="username">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" autocomplete="off" placeholder="密码"
                                       class="layui-input" lay-verify="password">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否为管理员</label>
                            <div class="layui-input-block">
                                <select name="isAdmin" lay-verify="isAdmin">
                                    <option value="true">管理员</option>
                                    <option value="false">普通用户</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属单位</label>
                            <div class="layui-input-block">
                                <select name="unitId" id="unitId" lay-verify="unitId">
                                    <!-- 单位选项将通过 AJAX 动态加载 -->
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="addUserForm">添加用户</button>
                                <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                            </div>
                        </div>
                    </form>
                `,
                success: function (layero, index) {
                    // 加载单位列表
                    $.ajax({
                        type: 'GET',
                        url: 'http://59.110.144.74/user/units',
                        dataType: 'json',
                        success: function (units) {
                            var select = $('#unitId');
                            units.forEach(function (unit) {
                                select.append('<option value="' + unit.id + '">' + unit.unitName + '</option>');
                            });
                            form.render('select'); // 重新渲染表单
                        },
                        error: function (xhr, status, error) {
                            console.error(error);
                            layer.msg('加载单位列表失败');
                        }
                    });

                    // 手动实现重置功能
                    $('#resetBtn').on('click', function () {
                        $('#addUserForm')[0].reset(); // 清空表单
                    });

                    // 监听保存按钮的提交事件
                    form.on('submit(addUserForm)', function (formData) {
                        var userData = formData.field;

                        // 将 isAdmin 转换为布尔值
                        userData.isAdmin = userData.isAdmin === 'true';

                        // 打印发送的数据
                        console.log('Sending Data:', JSON.stringify(userData));

                        // 发送保存请求
                        $.ajax({
                            type: 'POST',
                            url: 'http://59.110.144.74/user/add', // 添加用户的接口
                            data: JSON.stringify(userData),
                            contentType: 'application/json',
                            success: function (res) {
                                console.log('添加成功:', res);
                                layer.msg('添加成功');
                                layer.close(index); // 关闭弹出窗口
                                userTableIns.reload(); // 刷新表格
                            },
                            error: function (xhr, status, error) {
                                console.error('Error Status:', xhr.status);
                                console.error('Error Response:', xhr.responseText);
                                layer.msg('添加失败: ' + xhr.responseText);
                            }
                        });

                        return false; // 阻止表单默认提交行为
                    });
                }
            });
        });
    });
</script>

<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

</body>

</html>
